<template>
  <div scholarship="app-container" class="scholarship">
    <el-table v-loading="listLoading" :data="scholarshipList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="奖学金ID" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="奖学金名称"  align="center">
        <template slot-scope="scope">
          {{ scope.row.scholarshipName }}
        </template>
      </el-table-column>
      <el-table-column label="人数比例" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.ratio }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间"  align="center">
        <template slot-scope="scope">
          {{ scope.row.updateTime }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status == 2">已删除</el-tag>
          <el-tag type="danger" v-else>状态异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" v-if="scope.row.status == 1" type="danger" @click="setStatusAt(scope.row)">删除</el-button>
          <el-button size="mini" v-if="scope.row.status == 2" type="success" @click="setStatusAt(scope.row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="requestParams.total"
        @current-change="change"
        :page-size="requestParams.pageSize"
      >
      </el-pagination>
    </div>

      <!-- el-dialog -->
    <el-dialog width="35%" title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="scholarshipForm">
        <el-form-item label="奖学金名字" :label-width="formLabelWidth">
          <el-input v-model="scholarshipForm.scholarshipName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="人数比例" :label-width="formLabelWidth">
          <el-input-number v-model="scholarshipForm.ratio" :min="0" :max="100" placeholder="请输入获奖人数比例" append>%</el-input-number>
        </el-form-item>
      </el-form>

      <div slot="footer" scholarship="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="toSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getScholarshipList, updateScholarship, getScholarshipById } from "@/api/scholarship";
export default {
  data() {
    return {
      scholarshipList: null,
      listLoading: true,
      requestParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      dialogFormVisible: false,
      buttonLoading: false,
      scholarshipForm: {
        id: 0,
        scholarshipName: "",
        ratio: 0
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      // 假设 getScholarships 是获取奖学金列表的API方法
      getScholarshipList(this.requestParams).then(response => {
        this.scholarshipList = response.data.list;
        this.requestParams.total = response.data.total;
        this.listLoading = false;
      });
    },
    
    change(page) {
      this.requestParams.pageNo = page;
      this.fetchData();
    },

    //编辑奖学金
    handleEdit(row) {
      this.dialogFormVisible = true;
      console.log("编辑奖学金:", row);
      this.scholarshipForm.scholarshipName = row.scholarshipName;
      this.scholarshipForm.ratio = row.ratio
      this.scholarshipForm.id = row.id

    },

    //处理响应
    opt(res){
      if(res.code == 200){
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }else {
        }
    },
    // 编辑的提交
    toSub(row) {
      
      this.buttonLoading = true;
      updateScholarship(this.scholarshipForm).then((res) => {
        this.opt(res)
        this.fetchData()
      }).catch(err => {
        console.log("err = " + err)
          this.opt(err)
        })
      this.buttonLoading = false;
      this.dialogFormVisible = false;
    },
    //修改状态
    setStatus(row){
      // this.setStatusAt()
      updateScholarship({id:row.id,status:row.status}).then(res => {
        this.opt(res)
        this.fetchData()
      })
      // fetchData()
    },

    setStatusAt(row) {
        this.$confirm('修改该奖学金状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.setStatus(row)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  }
};
</script>

<style scoped>
.page {
  margin-top: 15px;
  text-align: center;
}

.scholarship{
  padding: 20px;
}
</style>